<template>
  <div class="navStore">
    <el-form ref="navForm" :model="navForm" :rules="navRules" label-width="120px">
      <el-form-item label="导航栏预览">
        <el-card>
          <div class="nav-box">
            <div class="nav-content">
              <div class="nav-img">
                <img :src="navForm.logoImg" alt />
              </div>
              <div v-for="(val, num) in navForm.navList" :key="num" class="nav-list">
                <div class="nav-item">
                  <a :href="val.link">{{ val.navTitle }}</a>
                </div>
              </div>
            </div>
            <div class="nav-btn">
              <i v-if="navForm.showSearch=='show'" class="el-icon-search" />
              <i class="el-icon-goods" />
              <i class="el-icon-time" />
              <i class="el-icon-user" />
            </div>
          </div>
        </el-card>
      </el-form-item>
      <el-form-item label="导航栏logo" prop="logoImg">
        <div class="logo-box">
          <el-upload
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
          >
            <img v-if="navForm.logoImg" :src="navForm.logoImg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
          <div class="hint">
            建议尺寸140*40px，JPG、PNG格式，
            图片小于1M。
          </div>
        </div>
      </el-form-item>
      <el-form-item label="课程搜索栏">
        <el-radio v-model="navForm.showSearch" label="show">显示</el-radio>
        <el-radio v-model="navForm.showSearch" label="unShow">不显示</el-radio>
      </el-form-item>
      <el-form-item label="导航栏设置">
        <div class="hint">最多可设置5个导航</div>
        <div class="list-box">
          <div class="list-top">
            <div class="list-row">
              <div class="list-row-item item-left">导航名称</div>
              <div class="list-row-item item-center">跳转链接</div>
              <div class="list-row-item list-right">操作</div>
            </div>
          </div>
          <div class="list-content">
            <vuedraggable
              v-model="navForm.navList"
              class="wrapper"
              handle=".dragBtn"
              animation="300"
            >
              <transition-group>
                <div v-for="(item, index) in navForm.navList" :key="index" class="list-row line">
                  <div class="list-row-item item-left">
                    <i class="el-icon-s-unfold dragBtn" />
                    <el-input v-model="item.navTitle" size="small" style="width:200px" />
                  </div>
                  <div class="list-row-item item-center">
                    <el-select v-model="item.linkName" placeholder="请选择" @change="skipChange($event,index)">
                      <el-option
                        v-for="item in linkOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                  <div class="list-row-item list-right">
                    <el-button type="text" @click="removeNavList(index)">删除</el-button>
                  </div>
                </div>
              </transition-group>
            </vuedraggable>
          </div>
          <div class="addNavBtn">
            <el-button @click="addNavList">添加导航</el-button>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div class="saveBtn">
      <el-button type="primary" @click="saveForm">保 存</el-button>
    </div>
    <!-- 微页面弹框 -->
    <micropagedialog
      :dialog="microPageDialog"
      @cancelClick="cancelClick"
      @confirmClick="microPageConfirm"
    />
    <!-- 知识商品 -->
    <studyarticledialog
      :dialog="studyArticleDialog"
      @cancelClick="cancelClick"
      @confirmClick="studyArticleConfirm"
    />
    <!-- 商品分组 -->
    <articlegroupdialog
      :dialog="articleGroupDialog"
      @cancelClick="cancelClick"
      @confirmClick="articleGroupConfirm"
    />
    <!-- 自定义链接 -->
    <customlinkdialog
      :dialog="customLinkDialog"
      @cancelClick="cancelClick"
      @confirmClick="customLinkConfirm"
    />
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'
import micropagedialog from './dialog/micropagedialog'
import articlegroupdialog from './dialog/articlegroupdialog'
import customlinkdialog from './dialog/customlinkdialog'
import studyarticledialog from './dialog/studyarticledialog'
export default {
  components: {
    vuedraggable,
    micropagedialog,
    articlegroupdialog,
    customlinkdialog,
    studyarticledialog
  },
  data() {
    return {
      navForm: {
        showSearch: 'show',
        logoImg: '',
        navList: [
          {
            navTitle: '首页',
            linkName: '',
            link: ''
          }
        ]
      },
      navRules: {
        logoImg: [
          { required: true, message: '请上传logo图片', trigger: 'blur' }
        ]
      },
      linkOptions: [
        {
          value: '微页面',
          label: '微页面'
        },
        {
          value: '知识商品',
          label: '知识商品'
        },
        {
          value: '商品分组',
          label: '商品分组'
        },
        {
          value: '自定义链接',
          label: '自定义链接'
        }
      ],
      microPageDialog: false,
      articleGroupDialog: false,
      customLinkDialog: false,
      studyArticleDialog: false,
      selectValue: '',
      listIndex: ''
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.navForm.logoImg = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 删除导航列表数据
    removeNavList(index) {
      this.$confirm('删除后将不可恢复，确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.navForm.navList.splice(index, 1)
      })
    },
    // 添加导航列表数据
    addNavList() {
      if (this.navForm.navList.length > 4) {
        this.$message.error('最多只能添加5个导航')
        return
      }
      this.navForm.navList.push({
        navTitle: '',
        link: ''
      })
    },
    // 选择跳转
    skipChange(val, index) {
      this.selectValue = val
      this.listIndex = index
      if (val === '微页面') {
        this.microPageDialog = true
      } else if (val === '知识商品') {
        this.studyArticleDialog = true
      } else if (val === '商品分组') {
        this.articleGroupDialog = true
      } else if (val === '自定义链接') {
        this.customLinkDialog = true
      }
    },
    // 保存
    saveForm() {
      this.$refs.navForm.validate((valid) => {
        if (valid) {
          this.$message.success('保存成功')
        } else {
          return false
        }
      })
    },
    // 接收弹框取消事件
    cancelClick() {
      this.microPageDialog = false
      this.studyArticleDialog = false
      this.articleGroupDialog = false
      this.customLinkDialog = false
    },
    // 微页面弹框确认事件
    microPageConfirm(data) {
      this.microPageDialog = false
      this.navForm.navList[this.listIndex].linkName = this.selectValue+' | '+data.name
      this.navForm.navList[this.listIndex].link = data.link
    },
    // 知识商品确认事件
    studyArticleConfirm(data) {

      this.studyArticleDialog = false
      this.navForm.navList[this.listIndex].linkName = this.selectValue+' | '+data.name
      this.navForm.navList[this.listIndex].link = data.link
    },
    // 商品分组弹框确认事件
    articleGroupConfirm(data) {
      this.articleGroupDialog = false
      this.navForm.navList[this.listIndex].linkName = this.selectValue+' | '+data.name
      this.navForm.navList[this.listIndex].link = data.link
    },
    // 自定义链接弹框确认事件
    customLinkConfirm(data) {
      this.customLinkDialog = false
      this.navForm.navList[this.listIndex].linkName = '链接'+' | '+data.link
      this.navForm.navList[this.listIndex].link = data.link
    },
  }
}
</script>

<style lang="scss" scoped>
.navStore {
  padding-right: 40px;
  /deep/.el-card__body {
    padding: 10px;
  }
  .nav-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .nav-content {
      display: flex;
      .nav-img {
        width: 140px;
        height: 40px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .nav-list {
        display: flex;
        margin-left: 40px;
        .nav-item {
          margin: 0 20px;
        }
      }
    }
    .nav-btn {
      i {
        font-size: 18px;
        padding: 5px;
      }
    }
  }
  .logo-box {
    display: flex;
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 140px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #898989;
      }
      .avatar {
        width: 140px;
        height: 40px;
        display: block;
      }
    }
  }
  .hint {
    color: #888;
    font-size: 14px;
    margin-left: 20px;
  }
  .list-box {
    .list-top {
      font-size: 14px;
      font-weight: bold;
      padding: 5px 10px;
      background-color: #f6f8fa;
    }
    .list-content {
      padding: 5px 10px;
    }
    .list-row {
      display: flex;
      align-items: center;
      .list-row-item {
      }
      .list-row-item.item-left {
        width: 40%;
        text-align: left;
        .dragBtn {
          font-size: 18px;
          margin: 0 10px;
          cursor: move;
        }
      }
      .list-row-item.item-center {
        width: 20%;
        text-align: center;
      }
      .list-row-item.list-right {
        width: 40%;
        text-align: right;
      }
    }
    .list-row.line {
      padding: 8px 0;
      border-bottom: 1px solid #eee;
    }
    .addNavBtn {
      margin-top: 20px;
    }
  }
  .saveBtn {
    margin: 20px 120px;
  }
}
</style>
